// 调用函数 动态渲染生成页面内容
setPage();

// 通过事件委托语法形式 给标签添加点击事件效果
$('.container').click(function (e) {
  // 获取 localStorage 中 存储的数据
  const cartArr = JSON.parse(window.localStorage.cart);

  // 全选点击事件
  if (e.target.getAttribute('name') === 'all') {
    // 给 数组中所有对象 buy 属性 设定属性值 
    // 是 全选input标签 checked属性值
    cartArr.forEach(item => {
      item.buy = e.target.checked;
    })

    // 其他input点击事件
  } else if (e.target.getAttribute('name') === 'other') {
    // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 购买状态
    // 索引下标相同的对象 其中 buy属性值 是 点击的标签 checked属性值
    cartArr[e.target.getAttribute('index') - 0].buy = e.target.checked;

    // 减按钮点击事件
  } else if (e.target.getAttribute('name') === '-') {
    // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
    // num属性值 累减 1 如果等于 1 禁用 当前标签
    cartArr[e.target.getAttribute('index') - 0].num--;

    // 加按钮点击事件
  } else if (e.target.getAttribute('name') === '+') {
    // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
    // num属性值 累加 1 如果等于 库存 禁用 当前标签
    cartArr[e.target.getAttribute('index') - 0].num++;

    // 我不要按钮点击事件
  } else if (e.target.getAttribute('name') === 'del') {
    if (window.confirm('您确定要删除吗?')) {
      // 给 索引下标 和 点击标签存储的index值 相同的数据 删除
      cartArr.splice(e.target.getAttribute('index') - 0, 1);
    }
  }


  // 将新的数组 存储到 localStorage 中 
  window.localStorage.cart = JSON.stringify(cartArr);
  // 调用函数 再次动态渲染生成页面
  setPage();

})



// 动态渲染生成页面内容
function setPage() {
  // 定义变量 存储 结果 设定 全选按钮的属性
  let all = true;
  // 定义变量 存储 商品种类 商品数量 商品总价格
  let type = 0;
  let number = 0;
  let money = 0;
  let str;
  let stra="";
  let strb;

  // 实际项目中 应该是想数据库发送请求获取购物车商品信息
  // 当前是 获取 localStorage中存储的 购物车商品信息

  // localStorage中没有cart属性
  if (window.localStorage.cart === undefined) {
    // 调用结果是 undefined 证明 没有 cart属性 
    // 生成 对应的 页面内容
    $('.zhu').html('<h1>您还没有购买记录,请您先去选择要购买的商品</h1>');

  } else {
    // 调用结果是 undefined 证明 有 cart属性
    // 其中存储的是 json字符串 需要还原为对应的数据结构
    const cartArr = JSON.parse(window.localStorage.cart);

    if (cartArr.length === 0) {
      // 如果是 空数组 生成对应的页面内容
      $('#hang').html("")
      $('.zhu').html('<h1>您的购物车已经被男朋友清空了,请您继续放心大胆的购物</h1>');


    } else {
      // 不是 空数组 根据 数组内容 动态渲染生成页面
      // li之前的固定内容 + 根据数组动态生成的li标签 + li之后的固定内容
      console.log(cartArr);

      // li之前的内容
      strb = `      
        <div class="panel panel-info ">
          <div class="panel-body bg-info">
            <div class="checkbox">
              <label>
                <input name="all" type="checkbox" value="">
                全选
              </label>
            </div>
          </div>
          <div class="panel-footer">

      ` ;


      // 根据数组 动态渲染生成的 li
      cartArr.forEach((item, key) => {
        if (item.buy) {
          // 如果商品的购买状态是true
          // 累加计算 购买商品的种类 数量 总价
          type++;
          number += item.num;
          money += item.num * item.goods_price;

        } else {
          // 如果商品的购买状态是false
          // 给全选checked属性值赋值false
          all = false;
        }

        str += `
        <tr>
        <td>
          <div class="left">
                <input name="other"  index="${key}"  type="checkbox" ${item.buy ? 'checked' : ''}>
          </div>
        </td>
        <td>
            <div class="media">
                <div class="d-flex">
                    <img src="${item.goods_small_logo}" alt="">
                </div>
                <div class="media-body">
                    <p>${item.goods_name}</p>
                </div>
            </div>
        </td>
        <td>
            <h5>$${item.goods_price}</h5>
        </td>
        <td>
            <div class="product_count">
                <input type="text" name="qty" id="sst" maxlength="12" value="${item.num}" title="Quantity:" class="input-text qty">
                <button name="-" index="${key}" ${item.num <= 1 ? 'disabled' : ''} class="increase items-count btn btn-default" type="button">—</button>
                <button name="+" index="${key}" ${item.num >= item.goods_number ? 'disabled' : ''}  class="reduced items-count btn btn-default" type="button">+</button>
                <button name="del" index="${key}" class="del btn btn-danger" style ="width:100px">我不要了</button>
            
            </div>
        </td>
        <td>
            <h5>${item.goods_price * item.num}元</h5>
        </td>
    </tr>
    
        `
      })


      // li之后的内容
      stra += `<div class="h1c" style="width:1140px;margin: 0 auto;">
                      <h4>您一共购买${type}种商品</h4>
                      <h4>您一共购买${number}件商品</h4>
                      <h4>您一共需要支付${money.toFixed(2)}元</h4>
                      <div class="bz">
                        <button>提交订单</button>
                      </div>      
               </div>
               
               

      `;

      // 内容写入 标签中
      $('.zhu').html(str);

      $('.quan').html(strb);
      $('.div').html(stra);

      // 设定全选标签的checked属性值
      $('[name="all"]').prop('checked', all);

    }
  }

}

